<template>
    <div class="debate-container">
      
      <!-- 内容主体 -->
      <div class="content-wrapper">
        <div class="header-section">
          <h1 class="main-title">欢迎使用智辩星</h1>
          <p class="sub-title">输入辩题并选择您的立场</p>
        </div>
  
        <div class="input-section">
          <el-input
            v-model="debatePrompt"
            :placeholder="inputPlaceholder"
            class="custom-input"
          />
        </div>
  
        <div class="stance-section">
          <el-radio-group v-model="selectedStance">
            <el-radio-button label="正方" class="pro-btn" />
            <el-radio-button label="反方" class="con-btn" />
          </el-radio-group>
        </div>
  
        <el-button 
          type="primary" 
          class="start-btn"
          @click="startDebate()"
        >
          开始辩论
        </el-button>
      </div>
    </div>
</template>
  
<script setup>
  import { ref } from 'vue'
  import { success,error } from '../tools/messageBox'
  import router from '../router'
  
  const debatePrompt = ref('')
  const selectedStance = ref('正方')
  const inputPlaceholder = '请输入你的辩题'

  const startDebate=()=>{
    if(debatePrompt.value==''||debatePrompt.value=='请输入你的辩题'){
        error("辩题不能为空");
        return;
    }
    router.push({
        path:'/HomePage/Chat',
        query:{
            debatePrompt:debatePrompt.value,
            selectedStance:selectedStance.value
        }
    })
  }
</script>
  
<style scoped>
  .debate-container {
    position: relative;
    height: 79vh;
    background: #ffffff;
    display: flex;
  }
  
  .content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    min-width: 600px; /* 最小保证内容完整性 */
  }
  
  .header-section {
    text-align: center;
    margin-bottom: 3rem;
  }
  
  .main-title {
    font-size: clamp(2rem, 4vw, 3rem);
    color: #333;
    margin-bottom: 1rem;
  }
  
  .sub-title {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: #666;
  }
  
  .input-section {
    width: 80%;
    max-width: 800px;
    margin-bottom: 2rem;
  }
  
  .custom-input {
    width: 100%;
    
    :deep(.el-input__inner) {
      height: 50px;
      font-size: 1.1rem;
      border-radius: 8px;
      padding: 0 20px;
    }
  }
  
  .stance-section {
    margin-bottom: 2rem;
    
    .el-radio-group {
      display: flex;
      gap: 2rem;
    }
    
    .el-radio-button {
      --el-radio-button-checked-bg-color: #409EFF;
      --el-radio-button-checked-border-color: #409EFF;
      --el-radio-button-checked-text-color: #fff;
      
      .el-radio-button__inner {
        width: 120px;
        height: 45px;
        font-size: 1.1rem;
      }
    }
  }
  
  .start-btn {
    width: 250px;
    height: 50px;
    font-size: 1.2rem;
    border-radius: 8px;
  }
  
  /* 响应式处理 */
  @media (max-width: 768px) {
    .content-wrapper {
      padding: 1rem;
      min-width: auto;
    }
    
    .input-section {
      width: 95%;
    }
    
    .stance-section .el-radio-group {
      gap: 1rem;
    }
  }
</style>